<template>
  <el-col class="sys-msg-col">
    <el-card class="sysMsg" v-for="(item, index) in sysMsg" :key="index">
      <div>
        <span class="sys-msg-t">{{item.title}}</span>
        <span class="sys-msg-date">{{item.date | toTime}}</span>
        <br />
        <span class="sys-msg-c">{{item.content}}</span>
        <span class="link" v-if="item.url">
          <i class="el-icon-link"></i>
          <span @click="linkTo(item.url)">网页链接</span>
        </span>
      </div>
    </el-card>
  </el-col>
</template>

<script>
import { getSysMsg } from "@/api/message";
export default {
  data() {
    return {
      sysMsg: [],
    };
  },
  methods: {
    _getSysMsg() {
      getSysMsg().then((res) => {
        if (res.data.code === 200) {
          this.sysMsg = res.data.data.data;
        }
      });
    },
    linkTo(url) {
      window.open(url, "_blank");
    },
  },
  created() {
    this._getSysMsg();
  },
  filters: {
    toTime(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return year + "-" + month + "-" + day + "  " + hours + ":" + minutes;
    },
  },
};
</script>

<style >
.sys-msg-col {
  background-color: #fff;
  min-height: 580px;
}

.sysMsg {
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 5px;
}

.sys-msg-t {
  font-size: 18px;
  font-weight: bold;
}

.sys-msg-date {
  float: right;
}

.sys-msg-c {
  color: #808080;
}

.link {
  margin-top: 8px;
  margin-left: 10px;
  color: #2faee3;
  cursor: pointer;
  word-break: break-all;
  word-wrap: break-word;
}
</style>